import React from 'react';
import { Table } from 'antd';
import { isArray } from 'lodash';
import styles from './EvaluationItems.less';

const EvaluationItems = ({ data }) => {
    const { project = [] } = data || {};

    const columns = [
        {
            title: '评估项目',
            dataIndex: 'project',
            width: '15%'
        },
        {
            title: '权重占比',
            dataIndex: 'weight',
            width: 60,
            render: text => `${text}%`
        },
        {
            title: (
                <div
                    style={{
                        position: 'absolute',
                        top: 0,
                        bottom: 0,
                        left: 16,
                        right: 0,
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center'
                    }}
                >
                    <div>评估标准</div>
                    <div
                        style={{
                            display: 'flex',
                            padding: 16,
                            alignItems: 'center',
                            width: 88,
                            height: '100%',
                            borderLeft: '1px solid #e8e8e8'
                        }}
                    >
                        得分
                    </div>
                </div>
            ),
            className: styles.headCol,
            dataIndex: 'content',
            // width: '60%',
            editable: true,
            render: text => {
                if (isArray(text) && text.length > 0) {
                    const block = text?.map((item, index) => (
                        <div
                            key={item.value}
                            style={{
                                flex: 1,
                                flexShrink: 0,
                                flexBasis: 'auto',
                                position: 'relative',
                                padding: '16px 104px 16px 16px',
                                display: 'flex',
                                alignItems: 'center',
                                wordBreak: 'break-all',
                                whiteSpace: 'pre-wrap',
                                borderBottom: index < text.length - 1 ? '1px solid #e8e8e8' : ''
                            }}
                        >
                            {item.label}
                            <div
                                style={{
                                    position: 'absolute',
                                    top: 0,
                                    right: 0,
                                    height: '100%',
                                    padding: 16,
                                    display: 'flex',
                                    alignItems: 'center',
                                    width: 88,
                                    borderLeft: '1px solid #e8e8e8'
                                }}
                            >
                                {item.value}
                            </div>
                        </div>
                    ));
                    return (
                        <>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    opacity: 0
                                }}
                            >
                                {block}
                            </div>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    position: 'absolute',
                                    top: 0,
                                    bottom: 0,
                                    left: 0,
                                    right: 0
                                }}
                            >
                                {block}
                            </div>
                        </>
                    );
                }
                return '';
            }
        }
    ];

    return (
        <div className={styles.evaluationItems}>
            <Table
                rowKey="id"
                bordered
                dataSource={project}
                columns={columns}
                rowClassName={styles.editableRow}
                pagination={false}
            />
        </div>
    );
};

export default EvaluationItems;
